<template>
	<div class="box" style="background: #fff;padding: 10px;">
		<div class="seach">
			<input type="text" placeholder="请输入应用场景" v-model="seachObj.scene" @input="getInit()" />
		</div>
		
		<ul class="list">
			<li v-for="item,index in lawDetailList" :key="index">
				<h1>{{item.number}}</h1>
				<p>{{item.content}}</p>
				<p style="color: #999;margin-top: 10px;">应用场景：{{item.scene}}</p>
			</li>
			
			<van-empty
			  class="custom-image"
			  image="https://img.yzcdn.cn/vant/custom-empty-image.png"
			  v-if="lawDetailList.length == 0"
			  description="没有找到相关法律条款"
			/>
			
		</ul>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				lawDetailList:[],
				seachObj:{},
			}
		},
		
		onLoad(option) {
			if(option._id){
				this.seachObj.queryId = option._id
				this.getInit()
			}
		},
		
		methods:{
			async getInit() {
				let result = await this.$axios('overallSituation', {
					databaseName: 'lawDetail',
					state: 'look',
					...this.seachObj
				}, true)
			
				if (result.code == 200) {
					this.lawDetailList = result.data
				}
			},
		}
	}
</script>

<style scoped>
	.seach {
		width: 100%;
		height: 5vh;
		margin-bottom: 10px;
		/* padding: 10px; */
		/* box-sizing: border-box; */
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.seach input {
		width: 98%;
		height: 35px;
		border-radius: 10px;
		border: 1px solid #e53935;
		padding: 0 10px;
		box-sizing: border-box;
		font-size: 12px;
		color: #333;
	}
	
	.list {
		width: 100%;
		height: 90vh;
		padding: 10px;
		box-sizing: border-box;
		border: 1px solid #e53935;
		border-left: 3px solid red;
		border-right: 3px solid red;
		border-radius: 10px;
		overflow-y: scroll;
	}
	
	.list li {
		width: 100%;
		margin-bottom: 15px;
	}
	
	.list h1 {
		font-size: 14px;
		font-weight: 700;
		margin-bottom: 10px;
		color: #333;
	}
	
	.list p {
		font-size: 12px;
		line-height: 20px;
		color: #333;
		text-indent: 2em;
	}
</style>